<template>
  <div class="over-template">

    <div class="over-template-itemnew">
      <div class="title">{{ itemData.title }}</div>
      <vptPalnList type="modalmsg"
                   :list="itemData.info"
                   numType="2"
                   :planItemStyle="planItemStyle"
                   :planListStyle="planListStyle"
                   @clickHeader="goDetail">
      </vptPalnList>
    </div>
    <VptModalAppRun ref="modalAppRun"
                    :showModal="showModal"
                    :modalStyle="modalStyle"
                    :detailData="detailModalData"
                    :isLandscape="isLandscape"
                    :itemLeftStyle="itemLeftStyle"
                    @onChange="onChange"
                    @rowClick="rowClick"
                    :titleTop="titleTop"
                    :column="columns"
                    :tableData="tableData"
                    :lineData="lineData"
                    :pieWidth="pieWidth"
                    :pieHeight="pieHeight"
                    @handleClick="handleClick"></VptModalAppRun>
  </div>
</template>

<script setup>
import { ref, watch, reactive, onBeforeUnmount } from "vue";
import vptPalnList from "@/components/vpt-base-msg-list";
import VptModalAppRun from "@/components/modal/vpt-modal-app-run/indexWarning.vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import { getMonitoringOverviewDetail } from "@/api/mockApi/largescree.js";
import clounData from "../../mock/data/infrastructure/infrastructurecloun.json";
import {
  getCharData
} from "@/api/mockApi/infrastructure.js";
const props = defineProps({
  itemData: {
    type: Object,
    required: true,
  },
  detailsData: {
    type: Array,
    default: () => [{ event_severity: '1' }],
  },
  planListStyle: {
    type: Object,
    default: () => ({
      height: "auto",
      margin: "0 0.16rem",
      marginTop: "0.08rem !important",
      width: "calc( 100% - 0.32rem )",
      paddingRight: "0.1rem",
    }),
  },
  modalStyle: {
    type: Object,
    default: () => ({
      width: "14.85rem",
      height: "8rem",
      padding: "0.24rem",
    }),
  },
});

const detailModalData = ref({});
const newData = ref({});
const columns = ref([]);
const tableData = ref([]);
const lineData = ref([]);
const showModal = ref(false);
const onChange = (value) => {
  showModal.value = false;
  detailRequest.stopFetching();
};
const itemLeftStyle = { "--bef-height": "0.16rem" };

const getMonitoringDetail = (params) => {
  getMonitoringOverviewDetail(params).then((res) => {
    detailModalData.value = res.data && res.data.length ? res.data[0] : {};
    detailModalData.value.cpu_usage = detailModalData.value.cpu_usage.replace(
      "%",
      ""
    );
    detailModalData.value.disk_usage = detailModalData.value.disk_usage.replace(
      "%",
      ""
    );
    detailModalData.value.memory_usage =
      detailModalData.value.memory_usage.replace("%", "");
    detailModalData.value.request_num_max_30days = JSON.parse(
      detailModalData.value.request_num_max_30days || "[]"
    );
    detailModalData.value.prompt_content = JSON.parse(
      detailModalData.value.prompt_content || "[]"
    );
    detailModalData.value.cluster_name_zh_cn = newData.value.bigtitle + newData.value.message;

    if (newData.value.bigtitle.includes("弹性云服务器")) {
      columns.value = clounData.data || [];
      tableData.value = clounData.showdataecs || [];
      if (newData.value.message == '内存使用预警') {
        tableData.value = tableData.value.slice(0, 1)
      } else if (newData.value.message == '磁盘使用预警') {
        tableData.value = tableData.value.slice(1, 2)
      }
      tableData.value.map((item, index) => {
        item.xh = index + 1
      })
      getCharData({
        type: "01",
        ip: tableData.value[0].app_ip,
      }).then((resp) => {
        lineData.value = resp.data || [];
      })
    } else if (newData.value.bigtitle.includes("弹性负载均衡")) {
      columns.value = clounData.dataelb || [];
      tableData.value = clounData.showdataelb || [];
      if (newData.value.message == '并发连接数预警') {
        tableData.value = tableData.value.slice(0, 8)
      } else if (newData.value.message == '入网带宽异常预警') {
        tableData.value = tableData.value.slice(9, 14)
      }
      else if (newData.value.message == '出网带宽异常预警') {
        tableData.value = tableData.value.slice(15, 22)
      }
      tableData.value.map((item, index) => {
        item.xh = index + 1
      })
      getCharData({
        type: "02",
        ip: tableData.value[0].app_ip,
      }).then((resp) => {
        lineData.value = resp.data || [];
      })
    } else if (newData.value.bigtitle.includes("分布式缓存服务")) {
      columns.value = clounData.datadcs || [];
      tableData.value = clounData.showdatadcs || [];
      if (newData.value.message == 'CPU使用率预警') {
        tableData.value = tableData.value.slice(0, 3)
      } else if (newData.value.message == '内存使用预警') {
        tableData.value = tableData.value.slice(4, 5)
      }
      tableData.value.map((item, index) => {
        item.xh = index + 1
      })
      getCharData({
        type: "03",
        ip: tableData.value[0].app_ip,
      }).then((resp) => {
        lineData.value = resp.data || [];
      })
    } else if (newData.value.bigtitle.includes("数据库服务")) {
      columns.value = clounData.datadb || [];
      tableData.value = clounData.showdatadb || [];
      if (newData.value.message == 'CPU使用率预警') {
        tableData.value = tableData.value.slice(0, 5)
      } else if (newData.value.message == '内存使用预警') {
        tableData.value = tableData.value.slice(10, 17)
      }
      tableData.value.map((item, index) => {
        item.xh = index + 1
      })
      getCharData({
        type: "04",
        ip: tableData.value[0].app_ip,
      }).then((resp) => {
        lineData.value = resp.data || [];
      })
    }
    showModal.value = true;


  });
};
// 获取列表点击行数据
const rowClick = (item) => {
  getCharData({
    type: item.typetag,
    ip: item.app_ip,
  }).then((resp) => {
    lineData.value = resp.data || [];
  })
};
// // 弹窗字段请求
// const clounListRequest = usePeriodicRequest(getcloun, 3000000, {
// });
// // 获取弹窗列表字段
// const getcloun = (params) => {

// };
const handleClick = (item) => {
  detailModalData.value.prompt_content.forEach((element) => {
    if (element.id === item.id) {
      element.hidden = !element.hidden;
    }
  });
};
const clusterName = ref();
const appType = ref();
const detailRequest = usePeriodicRequest(getMonitoringDetail, 300000, {
  cluster_name: clusterName.value,
  app_type: appType.value,
});
const goDetail = (data) => {

  newData.value = data;
  clusterName.value = data.cluster_name;
  appType.value = data.app_type;

  detailRequest.updateParams({
    app_name: clusterName.value,
    type_code: appType.value,
  });
  detailRequest.startFetching();
};
const emit = defineEmits(["changeTab", "onChange", "handlePath"]);

const info = ref([]);

onBeforeUnmount(() => {

  detailRequest.stopFetching();
});
watch(
  () => props.itemData,
  () => {
    // info.value = JSON.parse(props.itemData.info || [])
    // console.log("info.value",info.value)
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.over-template {
  padding: 0 0.15rem 0 0;
  .title {
    font-size: 0.18rem;
    color: #151a24;
    padding: 0 0 0.05rem 0.15rem;
  }
  .over-template-itemnew {
    height: 1.88rem;
    width: 4.46rem;
    margin-top: 0.08rem;
    padding: 0.2rem 0;
    background: #fff;
    // background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
    border: 0.01rem solid #e6ebf5;
  }
}
.over-template:nth-child(4n) {
  padding-right: 0;
}
</style>